<template>
    <div class="search-box">
        <!-- 综合分类start -->
        <div class="sales">
            <span :class=" { ck:sortType=='pop' } " @click=" reloadList('pop') ">综合</span>
            <span :class=" { ck:sortType=='sell' } " @click=" reloadList('sell') ">销量</span>
            <span :class=" { ck:sortType=='new' } " @click=" reloadList('new') ">新品</span>
        </div>
        <!-- 综合分类end -->
        <ScrollView class="item">
            <div>
                <YourLike :docs="docs" />
            </div>
        </ScrollView>
        <FiexdMenus></FiexdMenus>
    </div>
</template>
<script>
import YourLike from "../components/YouLike";
export default {
    name:"search",
    data() {
        return {
            sortType: "pop",
            docs: [],
        };
    },
    // watch: {
    //     "$route.query.q":function(){
    //         this.loadSearchData();
    //     }
    // },
    beforeRouteUpdate (to, from,next) {
        // console.log(to,from);
        next();
        this.loadSearchData();
    },
    methods: {
        loadSearchData(sort="pop") {
            this.sortType = sort;
            let params = {
                sort:sort,
                page:"1"
            }
            if(this.$route.query.q){
                params.cKey = 46;
                params.q = this.$route.query.q;
            }else{
                params.cKey = 16;
                params.title = this.$route.query.title;
                if(this.$route.query.fcid){
                    params.fcid = this.$route.query.fcid;
                }
            }
            this.$api
                .loadDataforsearch(params)
                .then(data => {
                    this.docs = data.wall.docs;
                })
                .catch(this.$error);
        },
        reloadList(sort){
            this.loadSearchData(sort);
        }
    },
    components: {
        YourLike
    },
    mounted() {
        // this.loadDataSearch();
        this.loadSearchData();
    }
};
</script>
<style lang="less" scoped>
.search-box {
    position: absolute;
    width: 100%;
    top: @h;
    bottom: 0;
    overflow: hidden;
}
.item {
    position: absolute;
    width: 100%;
    top: @h;
    bottom: 0;
    overflow: hidden;
}
.item-box {
    box-sizing: border-box;
    width: 50%;
    height: 660px;
    // border:1px solid red;
    padding: 20px 20px;
    .item-img {
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        width: 100%;
        height: 460px;
        border-radius: 20px 20px 0 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: @de;
        .imgs {
            box-sizing: border-box;
            border-radius: 20px 20px 0 0;
            width: 100%;
        }
        .img-btn {
            position: absolute;
            width: 18%;
            right: 20px;
            bottom: 20px;
        }
    }
    .item-price {
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        > :first-child {
            font-size: 40px;
        }
        > :last-child {
            font-size: 30px;
            color: @99;
            span {
                margin-right: 15px;
            }
        }
    }
}
</style>